<template>
    <view>
		
        <view class="content" >
			<view class="msg" >
            <div v-for="(item,index) in message" :key="index">{{JSON.stringify(item)}}</div>
        </view>
		</view>
        <view class="right" >
            <button style="font-size: 1px; margin-left:10rpx; margin-top:0rpx; margin-bottom: 5rpx;" @click="message = []">清空屏幕消息</button><button style="font-size: 1px;margin-right:50rpx; margin-left:50rpx;margin-top:0rpx;margin-bottom: 0rpx;" @click="socket('close')">断开</button><button style="font-size: 1px;margin-right:10rpx; margin-top:0rpx;margin-bottom: 0rpx;" @click="socket('connect')">连接</button>
			</view>
        <view class="text"  >
            <button  style="font-size:38rpx; -webkit-justify-content: flex-start;justify-content: flex-start; width: 100rpx; margin-right:5rpx;margin-left:10rpx; margin-top:0rpx;margin-bottom: 0rpx;" @click="socket('LF')">LF</button>
			<button   style="font-size: 38rpx; -webkit-justify-content: flex-start;justify-content: flex-start; width: 100rpx; margin-left:5rpx; margin-right:5rpx; margin-top:0rpx;" @click="socket('front')">front</button>
			<button  style="-webkit-justify-content: flex-start; justify-content: flex-start;font-size: 38rpx; width:100rpx; margin-left:5rpx;  margin-top:0rpx;" @click="socket('RF')">RF</button>
            <button style="-webkit-justify-content: flex-end; justify-content: flex-end;font-size: 38rpx;margin-right:50rpx; width: 200rpx;margin-top:0rpx; " @click="socket('up')">up</button>
        </view>
		<view class="text1" >
			<button  style="font-size: 38rpx; -webkit-justify-content: flex-start;justify-content: flex-start; width: 100rpx; margin-right:5rpx;margin-left:10rpx;margin-top:5rpx;" @click="socket('left')">left</button>
			<button  style="font-size: 38rpx; -webkit-justify-content: flex-start;justify-content: flex-start; width: 100rpx; margin-left:5rpx; margin-right:5rpx;margin-top:5rpx;" @click="socket('+')">+</button>
			<button  style="-webkit-justify-content: flex-start; justify-content: flex-start;font-size: 38rpx; width:100rpx; margin-left:5rpx; margin-top:5rpx;" @click="socket('right')">right</button>
			<button  style="-webkit-justify-content: flex-end; justify-content: flex-end;font-size: 38rpx;margin-right:50rpx;width: 200rpx; margin-top:5rpx;" @click="socket('-')">-</button>
		</view>
		<view class="text">
		<button  style="font-size: 38rpx; -webkit-justify-content: flex-start;justify-content: flex-start; width: 100rpx; margin-right:5rpx;margin-left:10rpx;margin-top:5rpx;" @click="socket('LB')">LB</button>
		<button  style="font-size: 38rpx; -webkit-justify-content: flex-start;justify-content: flex-start; width: 100rpx; margin-left:5rpx; margin-right:5rpx;margin-top:5rpx;" @click="socket('back')">back</button>
		<button  style="-webkit-justify-content: flex-start; justify-content: flex-start;font-size: 38rpx; width:100rpx; margin-left:5rpx; margin-top:5rpx;" @click="socket('RB')">RB</button>
		<button  style="-webkit-justify-content: flex-end; justify-content: flex-end;font-size: 38rpx;margin-right:50rpx;width: 200rpx;margin-top:5rpx;" @click="socket('down')">down</button>
		</view>
        </view>
</template>
<script>
    const _TCPSocket = uni.requireNativePlugin("zad-socket-tcp");
    export default {
        data() {
            return {
                message: [{ code: 200, data: 'Socket 插件测试' }]
            }
        },
		onShow() {
						plus.navigator.setFullscreen(true);
						plus.navigator.hideSystemNavigation()		
		},
		onLoad() {
			plus.screen.lockOrientation('default');
		},
		   onUnload() {
			plus.screen.lockOrientation('portrait-primary');
		},
        methods: {
            socket(method) {
                switch (method) {
                    case "connect": //连接
                        _TCPSocket.event({
                            method: method,
                            param: { ip: '192.168.4.1', port: 10000 }
                        }, e => {
                            this.handleMessage(e)
                        })
                        break;
                    case "isConnected": //是否已连接
                        _TCPSocket.event({ method: 'isConnected' })
                        break;
                    case "up": //发送消息
                        _TCPSocket.event({
                            method: 'send',
                            param: { message: 'u' }
                        })
						break;
					case "down": //发送消息
						_TCPSocket.event({
						    method: 'send',
						    param: { message: 'd' }
						})
                        break;
					case "right": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'r' }
					    })
					break;
					case "left": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'l' }
					    })
					break;
					case "front": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'f' }
					    })
					break;
					case "back": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'b' }
					    })
					break;
					case "LF": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'lf' }
					    })
					break;
					
					case "RF": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'rf' }
					    })
					break;
					case "LB": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'lb' }
					    })
					break;
					case "RB": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: 'rb' }
					    })
					break;
					case "+": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: '+' }
					    })
					break;
					case "-": //发送消息
					    _TCPSocket.event({
					        method: 'send',
					        param: { message: '-' }
					    })
					break;
                    case "close": //关闭
                        _TCPSocket.event({ method: 'close' })
                        break;
						
                }
            },
            handleMessage(e) {
                //e.code    400方法调用失败、200方法调用成功、0插件主动发送的消息、-1插件主动发送的异常消息
                //e.method  调用时传递的参数，可以根据method处理逻辑
                //e.data    返回数据体
                this.message.push(e)
                if (e.method == 'receive') {
                    //接收到服务端的消息
                    console.log(e.data)
                }
            },
			
        }
    }
</script>
<style scoped>
    .page {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
	.right{
		display: flex;
		flex-direction: row;
		align-items: center;
	justify-content: space-between;
	}
	
	.r1{
		font-size: 2rpx;
		width: 20rpx;
		height: 10rpx;
		text-align: right;
	}
    .msg {
		font-size: 2rpx;
		width: 200rpx;
		height: 10rpx;
		text-align: center;
    }
	.k{
		display: flex;
		justify-content: center;
		border: 100rpx;
		color: #8f8f94;
	}
	.text {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		line-height: 70rpx;
		text-align: left;
		color: #777;
		font-size: 26rpx;
	}
	.text1 {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;

		line-height: 70rpx;
		text-align: left;
		color: #777;
		font-size: 26rpx;
	}
	.sju{
		height: 50rpx;
		width: 300rpx;
		border-style:solid;
		border-radius:45;
		margin:30rpx
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
